
<template>
    <div class="dir-top-nowrap gap">
        <template v-if="row">

            <Head>
                <Title>{{ row.title }}</Title>
                <Meta name="description" :content="row.title" />
                <Meta name="keywords" :content="row.title" />
            </Head>
            <h2 class="main-center">标题;{{ row.title }}</h2>
            <div class="main-between gap">
                <NuxtLink v-if="rowLast" :to="{ name: 'article-id', params: { id: rowLast.id } }" class="box-grow-1">
                    上一篇：{{ rowLast.title }}</NuxtLink>
                <NuxtLink v-if="rowNext" :to="{ name: 'article-id', params: { id: rowNext.id } }"
                    class="box-grow-1 dir-right-nowrap">
                    下一篇：{{ rowNext.title }}</NuxtLink>
            </div>
        </template>
        <template v-else>
            找不到文章
        </template>
    </div>
</template>

<script setup lang="ts">
import { NuxtLink, Head, Title, Meta } from "#components";
import { getArticleInfo } from "~/api";
import { Code } from "~~/global";
import type { Article } from "@/type";

const id = useAppRouteParams<string>('id')
const row = ref<Article | null>(null)
const rowLast = ref<Article | null>(null)
const rowNext = ref<Article | null>(null)
const loading = ref(false)
async function getData() {
    loading.value = true
    const res = await getArticleInfo(+id.value).finally(() => {
        loading.value = false
    })
    if (res.code != Code.success) {
        return console.log(res.msg);
    }
    row.value = res.data.row
    rowLast.value = res.data.row_last
    rowNext.value = res.data.row_next
}
await getData()






</script>

<style lang='scss' scoped></style>